<template>
  <div id="app" class="container">
    <br /><br />
    <div class="main clearfix">
      <div class="content">
        <div class="filter">
          <div class="filter-wrapper clearfix">
            <ul class="filter-tag">
              <li class="on _j_tag"><a href="javascript:;">全部</a></li>
              <li data-tid="5e3286e8304b00003b0053d8" class="_j_tag">
                <a href="javascript:;">文化</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053d9" class="_j_tag">
                <a href="javascript:;">特别策划</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053da" class="_j_tag">
                <a href="javascript:;">美食</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053dd" class="_j_tag">
                <a href="javascript:;">节庆</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053e7" class="_j_tag">
                <a href="javascript:;">登山</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053e5" class="_j_tag">
                <a href="javascript:;">星旅行</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053e6" class="_j_tag">
                <a href="javascript:;">滑雪</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053e1" class="_j_tag">
                <a href="javascript:;">摄影</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053e3" class="_j_tag">
                <a href="javascript:;">建筑</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053e4" class="_j_tag">
                <a href="javascript:;">家庭</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053dc" class="_j_tag">
                <a href="javascript:;">自驾</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053d7" class="_j_tag">
                <a href="javascript:;">户外</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053de" class="_j_tag">
                <a href="javascript:;">必备</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053db" class="_j_tag">
                <a href="javascript:;">购物</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053e0" class="_j_tag">
                <a href="javascript:;">周边</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053d5" class="_j_tag">
                <a href="javascript:;">数据报告</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053e2" class="_j_tag">
                <a href="javascript:;">旅行主义</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053df" class="_j_tag">
                <a href="javascript:;">观赏</a>
              </li>
              <li data-tid="5e3286e8304b00003b0053d6" class="_j_tag">
                <a href="javascript:;">休闲</a>
              </li>
            </ul>
            <a href="javascript:void(0);" class="trigger _j_trigger_btn"
              >更多</a
            >
          </div>
        </div>
        <div class="guide-list">
          <div class="item clearfix" v-for="(item, index) in strateList">
            <!-- href="./strategy_detail.html?id=5e33bd2a9c300000e9003ae3" -->
            <a
              target="_blank"
              class="_j_item"
              @click="$router.push(`/strategy_detail?id=${item.id}`)"
            >
              <div class="img">
                <img :src="item.coverUrl" />
              </div>
              <div class="detail">
                <h3>{{ item.title }}</h3>
                <ul>
                  {{
                    item.summary
                  }}
                </ul>
                <div class="extra">
                  <span class="location"><i></i>{{ item.destName }}</span>
                  <span class="view"><i></i>{{ item.viewnum }}</span>
                </div>
              </div>
            </a>
          </div>

          <div style="float: right">
            <div style="float: left">
              <span style="line-height: 30px">
                共2页 / 17条&nbsp;&nbsp;&nbsp;</span
              >
            </div>
            <div id="pagination" class="jq-pagination" style="display: inline">
              <a
                class="prev disabled"
                href="javascript:void(0);"
                jp-role="prev"
                jp-data="0"
                >上一页</a
              ><a
                href="javascript:void(0);"
                jp-role="page"
                jp-data="1"
                class="active"
                >1</a
              ><a href="javascript:void(0);" jp-role="page" jp-data="2">2</a
              ><a
                class="next"
                href="javascript:void(0);"
                jp-role="next"
                jp-data="2"
                >下一页</a
              ><a
                class="last"
                href="javascript:void(0);"
                jp-role="last"
                jp-data="2"
                >尾页</a
              >
            </div>
          </div>
        </div>
      </div>
      <div class="side-sales">
        <h3>本周热卖</h3>
        <ul>
          <li>
            <a href="javascript:;" target="_blank"
              ><span class="image"
                ><img src="@/assets/images/wKgBEFs6E4yAPz00AAhnvJUJ1j8238.gif"
              /></span>
              <div
                title="广州长隆野生动物世界门票    随买随用 ／广州长隆旅游度假区／一票通玩 ／ 快速出票快捷入园 ／ 含空中览车及小火车/亲子乐园/赠送电子导览／自然零距离／广州长隆野生动物园"
                class="title"
              >
                广州长隆野生动物世界门票 随买随用 ／广州...
              </div>
              <span class="price">¥260</span>
            </a>
          </li>
          <li>
            <a href="javascript:;" target="_blank"
              ><span class="image"
                ><img src="@/assets/images/wKgED1wweM2AVCMFAAzr37WPWDI967.gif"
              /></span>
              <div
                title="广州长隆欢乐世界门票   当天可买／广州长隆旅游度假区／快速出票快捷入园／收藏店铺送卷送攻略／广东番禺汉溪长隆/长隆成人票／情侣票／家庭票／双人票／儿童票"
                class="title"
              >
                广州长隆欢乐世界门票 当天可买／广州长隆旅...
              </div>
              <span class="price">¥187</span>
            </a>
          </li>
          <li>
            <a href="javascript:;" target="_blank"
              ><span class="image"
                ><img src="@/assets/images/wKgED1wdwVmAVaZUADon6OL7_xw084.gif"
              /></span>
              <div
                title="当天可订/广州长隆野生动物世界门票/长隆野生动物园/广州长隆旅游度假区/含缆车小火车/南北门均可取票（提前1天规则退）"
                class="title"
              >
                当天可订/广州长隆野生动物世界门票/长隆野生...
              </div>
              <span class="price">¥256</span>
            </a>
          </li>
          <li>
            <a href="javascript:;" target="_blank"
              ><span class="image"
                ><img src="@/assets/images/wKgBEFrEdj-Ac-nXAAOvgGsSLJI85.jpeg"
              /></span>
              <div
                title="广州长隆水上乐园门票 一票通玩（电子票／当地必玩／免预约／超级大喇叭/热浪谷/意想不到的水上乐园）"
                class="title"
              >
                广州长隆水上乐园门票 一票通玩（电子票／当地...
              </div>
              <span class="price">¥122</span>
            </a>
          </li>
          <li>
            <a href="javascript:;" target="_blank"
              ><span class="image"
                ><img src="@/assets/images/wKgED1wk2LeAC2NJAAJQtab6Yqw67.jpeg"
              /></span>
              <div
                title="寻味广州1日游（6人小团·探黄埔军校陈家祠·电车看广州塔+沙面·西关美食秘籍·本地人带玩）"
                class="title"
              >
                寻味广州1日游（6人小团·探黄埔军校陈家祠·...
              </div>
              <span class="price">¥288</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { StrategiesIndexAPI } from "@/request/api";
export default {
  data() {
    return {
      strateList: [],
    };
  },
  methods: {},
  async created() {
    let res = await StrategiesIndexAPI(1);
    // console.log(res.data);
    this.strateList = res.data.content;
  },
};
</script>

<style scoped>
@import "@/assets/css/travelguide.css";
@import "@/assets/css/jqPagination.css";
</style>
